<template>
  <div>
    <div class="vpc-network-network-search">
      <el-button
        class="search-wrapper-button"
        type="primary"
        @click="addRouterConfig"
        >新 建</el-button
      >
    </div>
    <div
      class="vpc-network-table content-wrapper el-card el-card__body is-always-shadow"
    >
      <TableComponent
        ref="tableRef"
        :table-list="state.tableData"
        :table-column-info="routeConfigByVpc"
        @updateData="setPageInfo"
        :options-button="optionsButton"
        @defaultPageData="setDefaultPage"
      >
      </TableComponent>
    </div>
  </div>

  <AddRouterConfig @updateData="getRouteConfigByVpcData" />
</template>
<script setup>
import {
  onMounted,
  onUnmounted,
  reactive,
  ref,
  shallowReactive,
  watch,
} from 'vue';
import TableComponent from '@/components/table/TableComponent.vue';
import debounce from 'lodash/debounce';
import { routeConfigByVpc } from '@/views/simulation/defaultConfig';
import { xtend } from '@/utils/common';
import { instanceToPlain } from 'class-transformer';
import {
  delRouterConfigByVPCApi,
  getRouterConfigByVPCApi,
} from '@/api/topo/simulationApi/vpc';
import { ElMessage, ElMessageBox } from 'element-plus';
import { emitter } from '@/utils/bus';
import AddRouterConfig from './addRouterConfig.vue';

// vpcID
const vpcID = ref('');

// 节点数据
const props = defineProps({
  vpcNode: null,
});

const tableRef = ref(null);
const pageInfo = ref(null);
const keyword = ref('');
const state = shallowReactive({
  tableData: [],
});

/**
 * 获取路由配置-VPC网络（防抖）
 */
const getRouteConfigByVpcData = debounce(async () => {
  const searchInfo_ = xtend(instanceToPlain(pageInfo.value), {
    keyword: keyword.value,
  });

  return getRouterConfigByVPCApi(vpcID.value, searchInfo_).then(res => {
    if (!(res instanceof Error)) {
      const {
        data: { list, total, page, pageSize },
      } = res;
      tableRef.value?.setPageInfo({ total, page, pageSize });
      state.tableData = list;
    }
  });
}, import.meta.env.VITE_INPUT_DEBOUNCE_TIME);

// 初始化页数
const setDefaultPage = arg => (pageInfo.value = arg);

const setPageInfo = arg => {
  pageInfo.value = arg;
  getRouteConfigByVpcData();
};

const optionsButton = [
  {
    link: true,
    type: 'danger',
    name: '删除',
    click: item => {
      ElMessageBox.confirm(
        `删除路由配置 【${item.ipv4}】 ，删除后将不可恢复！`,
        '删除路由配置',
        {
          confirmButtonText: '删 除',
          cancelButtonText: '取 消',
          type: 'warning',
          center: true,
          customClass: 'delMessageBox',
          confirmButtonClass: 'delButtonClass',
        },
      ).then(async () => {
        delRouterConfigByVPCApi(vpcID.value, item.ID).then(res => {
          if (!(res instanceof Error)) {
            ElMessage.success(`删除成功!`);
            getRouteConfigByVpcData();
          }
        });
      });
    },
  },
];

// 添加路由配置
const addRouterConfig = () => {
  emitter.emit('addRouterConfig', { vpcID: vpcID.value });
};

// 监听传递过来的节点数据
watch(
  () => props.vpcNode,
  val => {
    vpcID.value = props.vpcNode.ID;

    if (vpcID.value) {
      getRouteConfigByVpcData();
    }
  },
  { immediate: true },
);

/**
 * 挂载-生命周期
 */
onMounted(() => {
  getRouteConfigByVpcData();
});

/**
 * 卸载-生命周期（主要处理清除定时器、解绑操作）
 */
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.vpc-network-network-search {
  margin-top: 12px;
  position: relative;

  button {
    margin-left: 16px;
  }

  .vm-manage-search {
    top: -10px !important;
  }
}

.vpc-network-table {
  padding-top: 12px;
  height: calc(100vh - 366px) !important;
}
</style>
